<template>
	<view>
		<!-- 自定义头部导航 -->
		<page-meta>
		    <navigation-bar
		      :title="'库存列表'"
		      front-color="#000000"
		      background-color="#FBFBFF"
			  fixed
		    />
		</page-meta>
		<u-line></u-line>
		<div style="display: flex; align-items: center;padding: 0 10px;">
		    <label for="scanInput" style="margin-right: 10px;">扫描包装条码</label>
		<view class="upload-scan">
			<scan-bar @code-scanned="getScanResult"></scan-bar>
		</view>
		</div>
		
		
		
		<!-- 列表 -->
		<u-list @scrolltolower="scrolltolower" class="list" v-if="total">
			<u-list-item v-for="(item, index) in indexList" :key="item.id">
				<view class="card">
					
					<view class="right">
						<view class="title">
							 &nbsp;&nbsp;<b>包装编码：{{item.storageUnitCode}}</b>
						</view>
						<view class="body">
							&nbsp;&nbsp;物料：{{item.materialCode}}(支架)
						</view>
						<view class="body">
							&nbsp;&nbsp;数量：{{item.totalQuantity }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;单位：{{item.quantityUnit }}
						</view>
						<view class="body">
							&nbsp;&nbsp;批次：{{item.supplyBatch}}
						</view>
					</view>
					
				</view>
			</u-list-item>
			
			
		</u-list>
		<!-- 空数据 -->
		
		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" top="600"></u-back-top>
	</view>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import { onShow, onPullDownRefresh, onPageScroll } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '@/utils/http';
import { PageResult } from '@/types/type';
const umodel = reactive({
  storageUnitCode: '',
  storageTypeId: '',
  storageTypeCode: '',
  storageTypeName: '',
  storageSectionId: '',
  storageSectionCode: '',
  binId: '',
  binCode: '',
  materialCode: '',
  totalQuantity: '',
  supplyBatch: '',
});

// 重置表单信息 & 光标自动blur
const scanBarRef = ref();
const datekey = ref(new Date());


const props = defineProps({
  id: {
    type: String,
    default: '',
  },
  binCode: {
    type: String,
    default: '',
  },
  requestId: {
    type: String,
    default: '',
  },
  workshopName: {
    type: String,
    default: '',
  }
});
const materialCode = JSON.parse(props.id);
const binCode = props.binCode;
const requestId = props.requestId;
const workshopName = props.workshopName;
const indexList = ref([]);
let ids = []; 
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);

const scrollTop = ref(0);

onPageScroll((e)=> {
	console.log('滚动', e)
	scrollTop.value = e.scrollTop
})


	loadmore();
	console.log("materialCode",materialCode);
	console.log("binCode",binCode);
	console.log("requestId",requestId);

onPullDownRefresh(()=> {
	current.value = 0;
	indexList.value = [];
	loadmore('refresh');
})


async function loadmore (type?: string) {
	try{
		current.value += 1
		const result: PageResult<any>  = await http({
			method: 'POST',
			url: '/wms/storageunit/queryByPage',
			data: {
				current: current.value,
				size: 20,
				data: {
					materialCode:materialCode,
					binCode:binCode
				}
			}
		})
		console.log('222222222222222', result.data);
		const list = result.data;
		totalPage.value = result.page;
		total.value = result.total;
		for (let i = 0; i < list.length; i++) {
			indexList.value.push(list[i]);
			
		}
		
		type === 'refresh' && uni.stopPullDownRefresh();
	}catch(e){
		console.log(e)
	}
	
	
}
// 修改获取扫描结果函数，实现找到对应数据并进行页面跳转，并将找到的数据传递过去
function getScanResult(result) {
  console.log('扫码结果', result);
  const unitCode = result;
  
  // 在 indexList.value 数组中查找对应的数据
  const detailToUpdate = indexList.value.find(item => item.storageUnitCode === unitCode);

  if (detailToUpdate) {
    // 构造需要传递的参数对象
    const queryParams = {
      id: detailToUpdate.id,
      storageUnitCode: detailToUpdate.storageUnitCode,
      materialCode: detailToUpdate.materialCode,
      totalQuantity: detailToUpdate.totalQuantity,
      quantityUnit: detailToUpdate.quantityUnit,
      supplyBatch: detailToUpdate.supplyBatch,
	  createTime: detailToUpdate.createTime
    };

    // 使用 uni.navigateTo 方法进行页面跳转，同时传递参数
    uni.navigateTo({
      url: '/pages/use/materialrequest/unit?id=' + JSON.stringify(queryParams)+'&requestId=' + requestId+'&workshopName=' + workshopName,
    });
  } else {
    alert('未找到对应包装');
  }
}

const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
</script>

<style lang="scss" scoped>
	.list {
		.card {
			margin-top: 5px;
			margin-bottom: 10px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
		
			.left {
				// flex-basis: 90rpx;
				padding-right: 10px;
				text-align: right;
				font-size: 13px;
		
				.enter {
					line-height: 20px;
					margin-bottom: 5px;
				}
		
				.number {
					font-size: 13px;
					line-height: 18px;
				}
		
				:deep(.u-icon--right) {
					flex-direction: row-reverse;
				}
			}
		
			.right {
				flex: 1;
				padding-left: 15px;
		
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
					font-weight: 700;
				}
		
				.body {
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
</style>
